<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import Test_title from '@/components/Test_title.vue'
import router from '@/router'
import { adminDeletePaperService, adminGetPaperListService, adminPublishPaperService } from '@/api/admin'
import { Delete, Reading, Upload } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useCountStore } from '@/stores/TeaStatisticsCount'

const test_title = ref([
  {
    id: 1,
    title: '测试1',
    publisher: '胡清钟',
    testTime: null,
    status: 1,
    beginTime: '2024-12-10',
    endTime: '2024-12-11'
  },
  {
    id: 2,
    title: '测试2',
    publisher: '胡清钟',
    testTime: 10,
    status: 3,
    beginTime: '2024-12-10',
    endTime: '2024-12-11'
  }
])

// 定义 status 枚举
enum Status {
  NotStarted = 0,
  InProgress = 1,
  Completed = 2,
  Ended = 3
}

// 计算属性，基于 status 返回标签内容和类型
const statusTag = (status: number) => {
  switch (status) {
    case Status.NotStarted:
      return { label: '未开始', type: 'info' }
    case Status.InProgress:
      return { label: '进行中', type: 'primary' }
    case Status.Completed:
      return { label: '已完成', type: 'success' }
    case Status.Ended:
      return { label: '已结束', type: 'danger' }
    default:
      return { label: '未知状态', type: 'info' }
  }
}

const createTest = () => {
  router.push('/teacher/test/create/0')
}

const formData = ref({
  currentPage: 1,
  pageSize: 10,
  searchContent: '',
  status: '未开始'
})

const totalPage = ref()

const getPaperList = async () => {
  const res = await adminGetPaperListService(formData.value)
  console.log(res.data.data)
  test_title.value = res.data.data.records
  totalPage.value = res.data.data.total
}

getPaperList()

const editTest = (id: number) => {
  router.push(`/teacher/test/create/${id}`)
}

const deletePaper = async (id : number)=>{
  await ElMessageBox.confirm('确认删除该试卷吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  await adminDeletePaperService(id)
  ElMessage.success("删除成功")
  await getPaperList()
}

const publishPaper = async (id: number)=>{
  await ElMessageBox.confirm('确认发布该试卷吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  await adminPublishPaperService(id)
  ElMessage.success("发布成功")
  await getPaperList()
  await useCountStore().getContentCount()
}
</script>

<template>
  <div id="main-teaTestCreatePage">
    <div class="search-area">
      <el-input placeholder="请输入试卷名称" style="width: 250px; margin-left: 20px"></el-input>
      <el-button type="primary">搜索</el-button>
      <el-button @click="createTest">新增试卷</el-button>
    </div>
    <el-scrollbar style="margin-top: 20px" height="70vh">
      <Test_title v-for="item in test_title" :key="item.id">
        <template #status>
          <el-tag :type="statusTag(item.status).type">{{ statusTag(item.status).label }}</el-tag>
        </template>
        <template #title>{{ item.title }}</template>
        <template #publisher>{{ item.publisher }}</template>
        <template #testTime>{{ item.testTime !== 0 ? item.testTime + '分钟' : '不限时' }}</template>
        <template #duration>{{ item.beginTime }} 至 {{ item.endTime }}</template>
        <template #check>
          <el-icon class="delete-icon" @click="editTest(item.id)" style="font-size: 30px">
            <Reading />
          </el-icon>
          <p @click="editTest(item.id)">查看测试</p>
        </template>
        <template #publish>
          <el-icon @click="publishPaper(item.id)" class="delete-icon" style="font-size: 30px">
            <Upload />
          </el-icon>
          <a @click="publishPaper(item.id)">发布试卷</a>
        </template>
        <template #delete>
          <el-icon @click="deletePaper(item.id)" class="delete-icon" style="font-size: 30px">
            <Delete />
          </el-icon>
          <a @click="deletePaper(item.id)">删除测试</a>
        </template>
      </Test_title>
      <el-empty v-if="test_title.length === 0" :image-size="200" />
    </el-scrollbar>
    <div class="pagination-area">
      <el-pagination
        v-model:current-page="formData.currentPage"
        background
        layout="prev, pager, next"
        :total="totalPage"
        @current-change="getPaperList"
      />
    </div>
  </div>
</template>

<style scoped>
#main-teaTestCreatePage {
  padding: 10px;
}

.pagination-area {
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.delete-icon:hover {
  color: skyblue;
}
</style>
